import { Card, Row, Col, Typography } from 'antd';
import { Link } from 'react-router-dom';
import './feature.css';

const { Title, Text } = Typography;

const Features = () => {
  const featuresData = [
    {
      icon: '✨',
      title: '单词学习',
      description: '解锁语言的力量，通过系统化的单词学习，轻松掌握海量词汇，让表达更加精准流畅，开启无限沟通可能！',
      link: '/word'
    },
    {
      icon: '💬',
      title: '对话练习',
      description: '探索多本对话秘籍，涵盖丰富场景与章节，全面提升沟通技巧，助您在各种场合游刃有余，成为真正的对话高手！',
      link: '/speech'
    },
    {
      icon: '📚',
      title: '阅读翻译',
      description: '跨越语言障碍，畅享全球文学之美。通过精准的阅读翻译，深入理解多元文化，拓展视野，让每一段文字都变得生动而有意义。',
      link: '/reading'
    },
    {
      icon: '📈',
      title: '进度记录',
      description: '追踪每一步成长，见证每一次突破。进度记录板块助您清晰掌握学习进展，设定目标，持续激励，让进步触手可及！',
      link: '/progress'
    }
  ];

  return (
    <div className="features-container">
      <Row gutter={[16, 16]} justify="center" align="middle">
        <Col xs={24} sm={24} md={8} lg={8}>
          <Card
            bordered={false}
            bodyStyle={{ padding: '24px 32px' }}
            className="features-large-card"
          >
            <Title level={3} style={{ textAlign: 'center', color: 'white', marginTop: '150px' }}>
              Take learning as a kind of living habits.
            </Title>
          </Card>
        </Col>
        <Col xs={24} sm={24} md={16} lg={16}>
          <Row gutter={[16, 16]}>
            {featuresData.slice(0, 2).map((feature, index) => (
              <Col key={index} xs={24} sm={12} md={12} lg={12}>
                <Card
                  bordered={false}
                  bodyStyle={{ padding: '16px' }}
                  className="features-small-card"
                >
                  <div className="features-card-body">
                    <span style={{ fontSize: '24px', marginRight: '8px', color: '#1890ff',marginBottom:-10 }}>{feature.icon}</span>
                    <Link to={feature.link} style={{ textDecoration: 'none', color: 'inherit' }}>
                      <Title level={5} className="features-feature-title">
                        {feature.title}
                      </Title>
                    </Link>
                  </div>
                  <Text style={{ color: '#A3A3A3',fontSize:15 }}>{feature.description}</Text>
                </Card>
              </Col>
            ))}
          </Row>
          <Row gutter={[16, 16]}>
            {featuresData.slice(2, 4).map((feature, index) => (
              <Col key={index} xs={24} sm={12} md={12} lg={12}>
                <Card
                  bordered={false}
                  bodyStyle={{ padding: '16px' }}
                  className="features-small-card"
                  style={{ marginTop: '50px' }}
                >
                  <div className="features-card-body">
                    <span style={{ fontSize: '24px', marginRight: '8px', color: '#1890ff',marginBottom:-10 }}>{feature.icon}</span>
                    <Link to={feature.link} style={{ textDecoration: 'none', color: 'inherit' }}>
                      <Title level={5} className="features-feature-title">
                        {feature.title}
                      </Title>
                    </Link>
                  </div>
                  <Text style={{ color: '#A3A3A3',fontSize:15 }}>{feature.description}</Text>
                </Card>
              </Col>
            ))}
          </Row>
        </Col>
      </Row>
    </div>
  );
};

export default Features;